<template>
  <div class="visitor-list">
    <!-- 顶部导航栏 -->
    <van-nav-bar title="访客列表" left-arrow @click-left="$router.push('/')" class="nav-bar" />

    <!-- 状态切换Tab -->
    <van-tabs v-model:active="activeTab" sticky>
      <van-tab title="全部">
        <div class="visitor-cards">
          <van-empty v-if="filterVisitors('all').length === 0" description="暂无访客记录" />
          <div v-for="visitor in filterVisitors('all')" :key="visitor.id" class="visitor-card">
            <div class="visitor-info">
              <div class="visitor-name">{{ visitor.name }} - {{ visitor.company }}</div>
              <div class="info-details">
                <div class="avatar">
                  <van-image round width="48" height="48" :src="visitor.avatar || 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'" />
                </div>
                <div class="info-content">
                  <div class="visit-purpose">
                    <span class="label">来访目的：</span>
                    <span>{{ visitor.purpose }}</span>
                  </div>
                  <div class="visit-time">
                    <span class="label">来访时间：</span>
                    <span>{{ visitor.visitTime }}</span>
                  </div>
                  <div class="visit-host">
                    <span class="label">被访人：</span>
                    <span>{{ visitor.host }}</span>
                  </div>
                </div>
              </div>
              <div class="status-tag">
                <van-tag :type="getStatusTagType(visitor.status)" round>
                  {{ getStatusText(visitor.status) }}
                </van-tag>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="待审核">
        <div class="visitor-cards">
          <van-empty v-if="filterVisitors('pending').length === 0" description="暂无访客记录" />
          <div v-for="visitor in filterVisitors('pending')" :key="visitor.id" class="visitor-card">
            <div class="visitor-info">
              <div class="visitor-name">{{ visitor.name }} - {{ visitor.company }}</div>
              <div class="info-details">
                <div class="avatar">
                  <van-image round width="48" height="48" :src="visitor.avatar || 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'" />
                </div>
                <div class="info-content">
                  <div class="visit-purpose">
                    <span class="label">来访目的：</span>
                    <span>{{ visitor.purpose }}</span>
                  </div>
                  <div class="visit-time">
                    <span class="label">来访时间：</span>
                    <span>{{ visitor.visitTime }}</span>
                  </div>
                  <div class="visit-host">
                    <span class="label">被访人：</span>
                    <span>{{ visitor.host }}</span>
                  </div>
                </div>
              </div>
              <div class="status-tag">
                <van-tag :type="getStatusTagType(visitor.status)" round>
                  {{ getStatusText(visitor.status) }}
                </van-tag>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="已通过">
        <div class="visitor-cards">
          <van-empty v-if="filterVisitors('approved').length === 0" description="暂无访客记录" />
          <div v-for="visitor in filterVisitors('approved')" :key="visitor.id" class="visitor-card">
            <div class="visitor-info">
              <div class="visitor-name">{{ visitor.name }} - {{ visitor.company }}</div>
              <div class="info-details">
                <div class="avatar">
                  <van-image round width="48" height="48" :src="visitor.avatar || 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'" />
                </div>
                <div class="info-content">
                  <div class="visit-purpose">
                    <span class="label">来访目的：</span>
                    <span>{{ visitor.purpose }}</span>
                  </div>
                  <div class="visit-time">
                    <span class="label">来访时间：</span>
                    <span>{{ visitor.visitTime }}</span>
                  </div>
                  <div class="visit-host">
                    <span class="label">被访人：</span>
                    <span>{{ visitor.host }}</span>
                  </div>
                </div>
              </div>
              <div class="status-tag">
                <van-tag :type="getStatusTagType(visitor.status)" round>
                  {{ getStatusText(visitor.status) }}
                </van-tag>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="已拒绝">
        <div class="visitor-cards">
          <van-empty v-if="filterVisitors('rejected').length === 0" description="暂无访客记录" />
          <div v-for="visitor in filterVisitors('rejected')" :key="visitor.id" class="visitor-card">
            <div class="visitor-info">
              <div class="visitor-name">{{ visitor.name }} - {{ visitor.company }}</div>
              <div class="info-details">
                <div class="avatar">
                  <van-image round width="48" height="48" :src="visitor.avatar || 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'" />
                </div>
                <div class="info-content">
                  <div class="visit-purpose">
                    <span class="label">来访目的：</span>
                    <span>{{ visitor.purpose }}</span>
                  </div>
                  <div class="visit-time">
                    <span class="label">来访时间：</span>
                    <span>{{ visitor.visitTime }}</span>
                  </div>
                  <div class="visit-host">
                    <span class="label">被访人：</span>
                    <span>{{ visitor.host }}</span>
                  </div>
                </div>
              </div>
              <div class="status-tag">
                <van-tag :type="getStatusTagType(visitor.status)" round>
                  {{ getStatusText(visitor.status) }}
                </van-tag>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  name: 'VisitorList',
  data() {
    return {
      activeTab: 0,
      visitors: [
        {
          id: 1,
          name: '张三',
          company: '阿里巴巴',
          purpose: '商务洽谈',
          status: 'pending',
          visitTime: '2024-03-20 14:30',
          host: '李四',
          avatar: ''
        },
        {
          id: 2,
          name: '王五',
          company: '腾讯科技',
          purpose: '技术交流',
          status: 'approved',
          visitTime: '2024-03-19 10:00',
          host: '赵六',
          avatar: ''
        },
        {
          id: 3,
          name: '钱七',
          company: '百度科技',
          purpose: '产品演示',
          status: 'rejected',
          visitTime: '2024-03-18 15:00',
          host: '孙八',
          avatar: ''
        }
      ]
    }
  },
  methods: {
    filterVisitors(status) {
      if (status === 'all') return this.visitors
      return this.visitors.filter(visitor => visitor.status === status)
    },
    getStatusTagType(status) {
      const types = {
        pending: 'warning',
        approved: 'success',
        rejected: 'danger'
      }
      return types[status] || 'default'
    },
    getStatusText(status) {
      const texts = {
        pending: '待审核',
        approved: '已通过',
        rejected: '已拒绝'
      }
      return texts[status] || '未知状态'
    }
  }
}
</script>

<style scoped>
.visitor-list {
  min-height: 100vh;
  background-color: #f7f8fa;
}

.visitor-cards {
  padding: 16px;
}

.visitor-card {
  margin-bottom: 12px;
  border-radius: 8px;
  overflow: hidden;
  background-color: #ffffff;
  padding: 16px;
}

.visitor-info {
  display: flex;
  flex-direction: column;
  position: relative;
}

.visitor-name {
  font-size: 18px;
  font-weight: 600;
  color: #323233;
  margin-bottom: 16px;
  padding-right: 80px;
}

.info-details {
  display: flex;
  align-items: center;
}

.avatar {
  margin-right: 12px;
}

.info-content {
  flex: 1;
}

.visit-purpose,
.visit-time,
.visit-host {
  font-size: 14px;
  color: #646566;
  margin-bottom: 8px;
}

.label {
  color: #969799;
  margin-right: 8px;
}

.status-tag {
  position: absolute;
  top: 0;
  right: 0;
}

.van-empty {
  padding: 32px 0;
}
</style>